<template>
	<view>
		<view class="wrap">
			<view class="recorder">
				<view class="time">00:{{voiceTime}}/00:60</view>
				<u-line-progress height="12" :show-percent="false" active-color="#2979ff"
					:percent="100/60*voiceTime">
				</u-line-progress>
				<view class="icon" :class="{cur:voiceTime>0}" @click="startRecord">
					<u-icon name="mic" size="20" color="#2F6EEF"></u-icon>
				</view>
			</view>
			<view class="voice">
				<view class="item" v-for="(item,i) in voiceInfo" :key="i" @longpress="delVoiceShow(i)"
					@click="playVoice(i)">
					<image :class="{cur:i==curVoice&&curVoiceStatus}" src="../../static/voice.png"
						mode=""></image>
					<text>{{item.time}}″</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		name:"n-recorder",
		data() {
			return {
				voicePath: [], //语音列表（上传数据）
				voiceInfo: [], //语音列表详细信息
				voiceTime: 0,
				timer: null, //定时器
				curVoiceStatus: false, //当前播放状态
				curVoice: '', //当前播放的语音下表
			};
		},
		mounted(){
			recorderManager.onStop((res) => {
				if (this.voiceTime < 2) {
					uni.showToast({
						title: '录音时间太短了～',
						icon: 'none'
					})
					this.voiceTime = 0
					clearInterval(this.timer)
					this.timer = null
					return
				}
				
				this.$api.uploadAudio(res).then(res1=>{
					if(res1.code==1){
						let url = JSON.parse(res1.data)
						this.voicePath.push(url.data.url)
					}else{
						this.$tools.toast(res1.msg)
					}
				})
				
				// uni.uploadFile({
				// 	url: 'https://www.zhongshengrunde.com/api/v1/upload/upload', //仅为示例，非真实的接口地址
				// 	filePath: res.tempFilePath,
				// 	name: 'file',
				// 	success: (res1) => {
				// 		console.log(res1)
				// 		let url = JSON.parse(res1.data)
				// 		this.voicePath.push(url.data.url)
				// 	}
				// });
				this.voiceInfo.push({
					time: this.voiceTime,
					url: res.tempFilePath
				})
				this.voiceTime = 0
				clearInterval(this.timer)
				this.timer = null
				console.log('recorder stop' + JSON.stringify(res));
			});
		},
		methods:{
			startRecord() {
				console.log('开始录音');
				if (this.voiceTime == 0) {
					recorderManager.start();
					this.timer = setInterval(() => {
						this.voiceTime++
					}, 1000)
				} else {
					this.endRecord()
				}
			},
			endRecord() {
				recorderManager.stop();
			},
			// 播放停止语音
			playVoice(i) {
				this.curVoice = i
				innerAudioContext.onPlay(() => {
					this.curVoiceStatus = true
				})
				innerAudioContext.onStop(() => {
					console.log('jieshu')
					this.curVoiceStatus = false
				})
				innerAudioContext.onEnded(() => {
					console.log('jieshu')
					this.curVoiceStatus = false
				})
				console.log(innerAudioContext.paused)
				if (innerAudioContext.paused) {
					innerAudioContext.src = this.voicePath[i];
					innerAudioContext.play();
				} else {
					innerAudioContext.stop();
				}
			},
			// 删除语音
			delVoiceShow(i) {
				innerAudioContext.stop();
				uni.showModal({
					title: '确认删除语音？',
					success: (res) => {
						if (res.confirm) {
							this.voicePath.splice(i, 1)
							this.voiceInfo.splice(i, 1)
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.recorder {
				display: flex;
				align-items: center;
				position: relative;
				padding: 38upx 38upx 14upx;
				border-bottom: 1upx solid #f5f5f5;

				.time {
					position: absolute;
					left: 38upx;
					top: 20upx;
					font-size: 28upx;
					font-weight: 300;
					color: #999999;
				}

				.icon {
					margin-left: 30upx;
					min-width: 68upx;
					height: 68upx;
					background: #F1F5FF;
					border-radius: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.cur {
					animation-name: biling;
					animation-duration: 2s;
					animation-iteration-count: infinite;
				}
			}
</style>